﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/general.css">
    <link rel="stylesheet" href="css/meals.css">
    <link rel="stylesheet" href="css/testimonials.css">
    <link rel="stylesheet" href="css/pricing.css">
    <link rel="stylesheet" href="css/feature.css">
    <link rel="stylesheet" href="css/action.css">
    <link rel="stylesheet" href="css/footer.css">
    <title>Omnifood</title>

</head>
<body>
<!--Header-->
<header class="header">
    <a href="#">
        <img class="logo" src="img/logo.png" alt="Omnifood logo" />
    </a>

    <nav class="main-nav">
        <ul class="main-nav-list">
            <li><a class="main-nav-link" href="#">Section 1</a></li>
            <li><a class="main-nav-link" href="#">Section 2</a></li>
            <li><a class="main-nav-link" href="#">Section 3</a></li>
            <li><a class="main-nav-link" href="#">Section 4</a></li>
            <li><a class="main-nav-link nav-cta" href="#">Section 5</a></li>
        </ul>
    </nav>
</header>

<main>
    <!-- Section Hero-->
    <section class="section-hero">
    <div class="hero">
        <div class="hero-text-box">
            <h1 class="heading-primary">
                A healthy meal delivered to your
                door,every single day
            </h1>
            <p class="hero-description">
                The smart 365-days-per-year food
                subscription that will make you
                eat healthy again.Tailored to your
                personal tastes nd nutritional
                needs.
                We have delivered 250,000+ meals
                last year!
            </p>
            <a href="#"
               class="btn btn--full margin-right-sm">
                Start eating well
            </a>
            <a href="#" class="btn btn--outline">Learn
                more &darr;</a>

            <div class="delivered-meals">
                <div class="delivered-imgs">
                    <img src="img/customers/customer-1.jpg" alt="Cusomter photo">
                    <img src="img/customers/customer-2.jpg" alt="Cusomter photo">
                    <img src="img/customers/customer-3.jpg" alt="Cusomter photo">
                    <img src="img/customers/customer-4.jpg" alt="Cusomter photo">
                    <img src="img/customers/customer-5.jpg" alt="Cusomter photo">
                    <img src="img/customers/customer-6.jpg" alt="Cusomter photo">
                </div>
                <p class="delivered-text">
                    <span>250,000+</span> meals last year!
                </p>
            </div>

        </div>
        <div class="hero-img-box">
            <img src="img/hero.jpg"
                 alt="Woman enjoying food,meals in storage container,and food bowls on a table"
                 class="hero-img">
        </div>
    </div>
</section>
    <!-- Section Featured-->
    <section class="section-featured">
        <div class="container">
            <h2 class="heading-featured-in">
                As featured in
            </h2>
            <div class="logos">
                <img src="img/logos/icon1.jpg" alt="Techcrunch logo">
                <img src="img/logos/icon2.jpg" alt="Techcrunch logo">
                <img src="img/logos/icon3.jpg" alt="Techcrunch logo">
                <img src="img/logos/icon4.jpg" alt="Techcrunch logo">
                <img src="img/logos/icon5.jpg" alt="Techcrunch logo">
            </div>
        </div>
    </section>
    <!-- Section How-->
    <section class="section-how ">
        <div class="container">
            <span class="subheading">How it works</span>
            <h2 class="heading-secondary">Your daily dose of health in 3 simple steps</h2>
        </div>
        <div class="container grid grid--2-cols grid--center-v">
            <!-- STEP 1 -->
            <div class="step-text-box">
                <p class="step-number">01</p>
                <h3 class="heading-tertiary">
                    Tell us what you like (and what not)
                </h3>
                <p class="step-description">
                    Never again waste time thinking about what to eat!Omnifood AI will create a 100% personalized weekly meal plan just for you.It makes sure you get all the nutrients and vitamins you need,no matter what diet you follow!
                </p>
            </div>
            <div class="step-img-box">
                <img src="img/app/app-screen-1.jpg" alt="Iphone app" class="step-img">
            </div>

            <!-- STEP 02 -->
            <div class="step-img-box">
                <img src="img/app/app-screen-1.jpg" alt="Iphone app" class="step-img">
            </div>
            <div class="step-text-box">
                <p class="step-number">02</p>
                <h3 class="heading-tertiary">
                    Approve your weekly meal plan
                </h3>
                <p class="step-description">
                    Never again waste time thinking about what to eat!Omnifood AI will create a 100% personalized weekly meal plan just for you.It makes sure you get all the nutrients and vitamins you need,no matter what diet you follow!
                </p>
            </div>


            <!-- STEP 03 -->
            <div class="step-text-box">
                <p class="step-number">03</p>
                <h3 class="heading-tertiary">
                    Receive meals at convenient time
                </h3>
                <p class="step-description">
                    Never again waste time thinking about what to eat!Omnifood AI will create a 100% personalized weekly meal plan just for you.It makes sure you get all the nutrients and vitamins you need,no matter what diet you follow!
                </p>
            </div>
            <div class="step-img-box">
                <img src="img/app/app-screen-1.jpg" alt="Iphone app" class="step-img">
            </div>
        </div>
    </section>
    <!-- Section Meal-->
    <section class="section-meals">
        <div class="container center-text">
            <span class="subheading">Meals</span>
            <h2 class="heading-secondary">
                Omnifood AI chooses from 5,000+ recipes
            </h2>
        </div>

        <div class="container grid grid--3-cols margin-bottom-md">
            <div class="meal">
                <img src="img/meals/1.jpg" class="meal-img" alt="Japanese Gyozas">
                <div class="meal-content">
                    <div class="meal-tags">
                        <span class="tag">Vegetarian</span>
                    </div>

                    <p class="meal-title">Japanese Gyozas</p>
                    <ul class="meal-attributes">
                    <li class="meal-attribute">
                        <ion-icon
                                class="meal-icon"
                                name="flame-outline"></ion-icon>
                        <span><strong>650</strong> calories</span>
                    </li>
                    <li class="meal-attribute">
                        <ion-icon
                                class="meal-icon"
                                name="restaurant-outline"></ion-icon>
                        <span>NutriScore &reg; <strong>74</strong></span>
                    </li>
                    <li class="meal-attribute">
                        <ion-icon
                                class="meal-icon"
                                name="star-outline"></ion-icon>
                        <span><strong>4.9</strong> rating (537)</span>
                    </li>
                </ul>
                </div>
            </div>

            <div class="meal">
                <img src="img/meals/2.jpg" class="meal-img" alt="Japanese Gyozas">
                <div class="meal-content">
                    <div class="meal-tags">
                        <span class="tag">Vegan</span>
                        <span class="tag">Paleo</span>
                    </div>

                    <p class="meal-title">Japanese Gyozas</p>
                    <ul class="meal-attributes">
                        <li class="meal-attribute">
                            <ion-icon
                                    class="meal-icon"
                                    name="flame-outline"></ion-icon>
                            <span><strong>650</strong> calories</span>
                        </li>
                        <li class="meal-attribute">
                            <ion-icon
                                    class="meal-icon"
                                    name="restaurant-outline"></ion-icon>
                            <span>NutriScore &reg; <strong>74</strong></span>
                        </li>
                        <li class="meal-attribute">
                            <ion-icon
                                    class="meal-icon"
                                    name="star-outline"></ion-icon>
                            <span><strong>4.9</strong> rating (537)</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="diets">
                <h3 class="heading-tertiary">Works with any diet:</h3>
                <ul class="list">
                    <li class="list-item"><ion-icon class="list-icon"  name="checkmark-outline"></ion-icon>Vegetarian</li>
                    <li class="list-item"><ion-icon  class="list-icon"name="checkmark-outline"></ion-icon>Vegan</li>
                    <li class="list-item"><ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Pescatarian</span></li>
                    <li class="list-item"><ion-icon  class="list-icon" name="checkmark-outline"></ion-icon><span>Gluten-free</span></li>
                    <li class="list-item"><ion-icon  class="list-icon" name="checkmark-outline"></ion-icon><span>lactose-free</span></li>
                    <li class="list-item"><ion-icon  class="list-icon" name="checkmark-outline"></ion-icon><span>Keto</span></li>
                    <li class="list-item"><ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Paleo</span></li>
                    <li class="list-item"><ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Low FODMAP</span></li>
                    <li class="list-item"><ion-icon class="list-icon" name="checkmark-outline"></ion-icon><span>Kid-friendly</span></li>
                </ul>
            </div>
        </div>

        <div class="container all-recipes">
            <a href="#" class="link">See all recipes &rarr;</a>
        </div>
    </section>

    <!-- Section Testimonials-->
    <section class="section-testimonials">

        <div class="testimonials-container">

        <span class="subheading">Testimonials</span>
        <h2 class="heading-secondary">
            Once you try it,you can not go back
        </h2>

        <div class="testimonials">

                <figure class="testimonial">
                    <img class="testimonial-img" src="img/customers/customer-1.jpg" alt="Photo of customer Dave">
                    <blockquote class="testimonial-text">Inexpensive,healthy and great-tasting meals,without even having to order manually!It</blockquote>
                    <p class="testimonial-name">&mdash; Dave Bryson</p>
                </figure>

                <figure class="testimonial">
                    <img class="testimonial-img" src="img/customers/customer-2.jpg" alt="Photo of customer Dave">
                    <blockquote class="testimonial-text">Inexpensive,healthy and great-tasting meals,without even having to order manually!It</blockquote>
                    <p class="testimonial-name">&mdash; Dave Bryson</p>
                </figure>

                <figure class="testimonial">
                    <img class="testimonial-img" src="img/customers/customer-3.jpg" alt="Photo of customer Dave">
                    <blockquote class="testimonial-text">Inexpensive,healthy and great-tasting meals,without even having to order manually!It</blockquote>
                    <p class="testimonial-name">&mdash; Dave Bryson</p>
                </figure>

                <figure class="testimonial">
                    <img class="testimonial-img" src="img/customers/customer-4.jpg" alt="Photo of customer Dave">
                    <blockquote class="testimonial-text">Inexpensive,healthy and great-tasting meals,without even having to order manually!It</blockquote>
                    <p class="testimonial-name">&mdash; Dave Bryson</p>
                </figure>
        </div>
        </div>

        <div class="gallery">
            <figure class="gallery-item">
                <img src="img/gallery/m1.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m2.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m3.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m4.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m1.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m2.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m3.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m2.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m3.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m2.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m3.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
            <figure class="gallery-item">
                <img src="img/gallery/m2.jpg"
                     alt="Photo of beautifully arranged food">
            </figure>
        </div>
    </section>

    <!-- Section Pricing-->
    <section class="section-pricing">
        <div class="container">
            <span class="subheading">Pricing</span>
            <h2 class="heading-secondary">
                Eating well without breaking the
                bank
            </h2>
        </div>

        <div class="container grid grid--2-cols margin-bottom-md">
            <div class="princing-plan princing-plan-starter">
                <header class="plan-header">
                    <p class="plan-name">
                        Starter</p>
                    <p class="plan-price">
                        <span>$</span>399</p>
                    <p class="plan-text">per
                        month.That's just $13 per
                        meal!</p>
                </header>
                <ul class="list">
                    <li class="list-item">
                        <ion-icon
                                class="list-icon"
                                name="checkmark-outline"></ion-icon>
                        <span>1 meal per day</span>
                    </li>
                    <li class="list-item">
                        <ion-icon
                                class="list-icon"
                                name="checkmark-outline"></ion-icon>
                        <span>Order from 11am to 9pm</span>
                    </li>
                    <li class="list-item">
                        <ion-icon
                                class="list-icon"
                                name="checkmark-outline"></ion-icon>
                        <span>Delivery is free</span>
                    </li>
                    <li class="list-item">
                        <ion-icon
                                class="list-icon"
                                name="close-outline"></ion-icon>
                    </li>
                </ul>
                <div class="plan-sign-up">
                <a href="#" class="btn btn--full">Start
                    eating well</a>
                    </div>
            </div>

            <div class="princing-plan princing-plan-complete">
                <header class="plan-header">
                    <p class="plan-name">
                        Complete</p>
                    <p class="plan-price">
                        <span>$</span>679</p>
                    <p class="plan-text">per
                        month.That's just $13 per
                        meal!</p>

                </header>
                <ul class="list">
                    <li class="list-item">
                        <ion-icon
                                class="list-icon"
                                name="checkmark-outline"></ion-icon>
                        <span><strong>2 meals</strong> per day</span>
                    </li>
                    <li class="list-item">
                        <ion-icon
                                class="list-icon"
                                name="checkmark-outline"></ion-icon>
                        <span>Order <strong>24/7</strong></span>
                    </li>
                    <li class="list-item">
                        <ion-icon
                                class="list-icon"
                                name="checkmark-outline"></ion-icon>
                        <span>Delivery is free</span>
                    </li>
                    <li class="list-item">
                        <ion-icon
                                class="list-icon"
                                name="checkmark-outline"></ion-icon>
                        <span>Get access to latest recipes</span>
                    </li>
                </ul>
                <div class="plan-sign-up">
                <a href="#" class="btn btn--full">Start
                    eating well</a>
                </div>
            </div>
        </div>

        <div class="container grid">
            <aside class="plan-details">
                Prices include all applicable taxes.You can cancel at any time.
            </aside>
        </div>

        <!--feature-->
        <div class="container grid grid--4-cols">
            <div class="feature">
                <ion-icon class="feature-icon" name="infinite-outline"></ion-icon>
                <p class="feature-title">
                    Never cook again!
                </p>
                <p class="feature-text">
                    Our subscriptions cover 365 days per year,even including major holidays
                </p>
            </div>

            <div class="feature">
                <ion-icon class="feature-icon" name="nutrition-outline"></ion-icon>
                <p class="feature-title">
                    Local and organic
                </p>
                <p class="feature-text">
                    Our subscriptions cover 365 days per year,even including major holidays
                </p>
            </div>

            <div class="feature">
                <ion-icon class="feature-icon" name="leaf-outline"></ion-icon>
                <p class="feature-title">
                    No waste
                </p>
                <p class="feature-text">
                    Our subscriptions cover 365 days per year,even including major holidays
                </p>
            </div>

            <div class="feature">
                <ion-icon class="feature-icon" name="pause-outline"></ion-icon>
                <p class="feature-title">
                    Pause anytime
                </p>
                <p class="feature-text">
                    Our subscriptions cover 365 days per year,even including major holidays
                </p>
            </div>

        </div>

    </section>


    <!-- Section Call-To-Action-->
    <section class="section-cta">
        <div class="container">
            <div class="cta">
                <div class="cta-text-box">
                    <h2 class="heading-secondary">
                        Get you first meal for free!
                    </h2>
                    <p class="cta-text">
                        Healthy,tasty and hasse-free meals are waiting for you.Start eating well today.The first meal is on us!
                    </p>
                    <form class="cts-form" action="#">
                        <div>
                            <label for="full-name">Full Name</label>
                            <input type="text" placeholder="Moriarty Smith" id="full-name"  required/>
                        </div>

                        <div>
                            <label for="email">Email Address</label>
                            <input id="email" type="email" placeholder="me@example.com" required />
                        </div>

                       <div>
                           <label for="select-where">Where did you hear from us?</label>
                           <select id="select-where" required>
                               <option value="">Please choose one option</option>
                               <option value="friends">Friends and family</option>
                               <option value="youtube">YouTube video</option>
                               <option value="podcast">Podcast</option>
                               <option value="google">Google</option>
                               <option value="others">Others</option>
                           </select>
                       </div>

                        <button class="btn btn--form">Sign up now</button>
                        
                    </form>
                </div>

                <div class="cta-img-box" role="img"  aria-label="Woman enjoying food">
                </div>
            </div>
        </div>
    </section>

</main>


<footer class="footer">
    <div class="container grid grid-footer">
        <div class="logo-col">
            <a href="#" class="footer-logo">
                <img class="logo" src="img/logo.png" alt="Omnifood logo" />
            </a>

            <ul class="social-links">
                <li><a class="footer-link" href="#"><ion-icon class="social-icon" name="logo-twitter"></ion-icon></a></li>
                <li><a class="footer-link" href="#"><ion-icon class="social-icon" name="logo-facebook"></ion-icon></a></li>
                <li><a class="footer-link" href="#"><ion-icon class="social-icon" name="logo-twitter"></ion-icon></a></li>
            </ul>
            <p class="copyright">Copyright &copy; 2027 by Omnifood,Inc. All rights reserved.</p>
        </div>

        <div class="address-col">
            <p class="footer-heading">
                Contact Us
            </p>
            <address class="contacts">
                <p class="address">Address:543 Harrison St.,2nd floor,San Francisco,CA 0987</p>
                <p>
                    <a class="footer-link" href="tel:345-234-0987">345-234-0987</a><br>
                    <a class="footer-link" href="mailto:hello@exm.com">hello@exm.com</a>
                </p>
            </address>
        </div>
        <nav class="nav-col">
            <p class="footer-heading">
                Account
            </p>
            <ul class="footer-nav">
                <li><a class="footer-link" href="#">Create account</a></li>
                <li><a class="footer-link" href="#">Sign in</a></li>
                <li><a class="footer-link" href="#">IOS app</a></li>
                <li><a class="footer-link" href="#">Android app</a></li>
            </ul>
        </nav>

        <nav class="nav-col">
            <p class="footer-heading">
                Company
            </p>
            <ul class="footer-nav">
                <li><a class="footer-link" href="#">About Omnifood</a></li>
                <li><a class="footer-link" href="#">For Business</a></li>
                <li><a class="footer-link" href="#">Cooking partners</a></li>
                <li><a class="footer-link" href="#">Careers</a></li>
            </ul>
        </nav>

        <nav class="nav-col">
            <p class="footer-heading">
                Resources
            </p>
            <ul class="footer-nav">
                <li><a class="footer-link" href="#">Recipe directory</a></li>
                <li><a class="footer-link" href="#">Help center</a></li>
                <li><a class="footer-link" href="#">Privacy & terms</a></li>
            </ul>
        </nav>

    </div>
</footer>

</body>
</html>